iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0

剩最後幾天了,今天講最後一個hook,接下來應該會用一個實際的小project來實戰練習

這個 hook 可以讓你在指定的時間間隔重複地執行一個回調函數,它的功能就跟原生的 setInterval 類似。

import { useEffect, useRef } from "react";

const useInterval = (callback: Function, delay?: number | null) => {
  const savedCallback = useRef<Function>(() => {});

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0);
      return () => clearInterval(interval);
    }

    return undefined;
  }, [delay]);
};

export default useInterval;
  1. const savedCallback = useRef<Function>(() => {});
    使用 useRef 保存回調函數。目的是讓回調函數在不同的 render 之間保持其持久性,但不會引起組件的重新渲染。
  2. 第一個 useEffect
    更新保存的回調函數,讓他始終都是最新的。
  3. 第二個 useEffect
    如果 delay 不為 null,將設置一個新的間隔。並在組件卸載時,清除這個間隔。

其實概念跟之前說的useTimeout差不多


上一篇
[Day 23] useIntersectionObserver測試
下一篇
[Day 25] useInterval測試
系列文
React進階班,用typescript與jest製作自己的custom hooks庫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言